<template>
  <div class="app-container">
    <el-divider content-position="center">检查信息</el-divider>
    <el-form label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="施工报备单号：">{{ form.reportNum }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="问题流水单号：">{{ form.checkProblemNum }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="问题类型：">{{form.problenType == 0 ? '施工问题' :'撤场问题' }}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="问题内容：">{{ form.problemContent }}</el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="检查照片/视频" prop="problemFileId">
          <image-preview  :value="this.problemFileData"/>
        </el-form-item>
      </el-row>

      <el-row>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="经纬度：">{{ form.checkLongitude + ',' + form.checkLatitude }}</el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="道路名称：">{{ form.checkRoadName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="方向：">{{ form.checkDirection }}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="所属管辖大队：">{{ form.deptName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查人员：">{{ form.checkByName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查时间：">{{ parseTime(form.checkTime) }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-divider content-position="center">整改上报信息</el-divider>
    <el-form label-width="120px" v-show="form.rectificationReportId != null">
      <el-row>
        <el-form-item label="整改描述：">{{ form.rectificationRemark }}</el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="整改照片/视频" prop="rectificationFileId">
          <image-preview :value="this.rectificationFileData"/>
        </el-form-item>
      </el-row>
      <el-row>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="经纬度：">{{ form.rectificationLongitude + ',' + form.rectificationLatitude}}</el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="道路名称：">{{ form.rectificationRoadName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="方向：">{{ form.rectificationDirection }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="整改人：">{{ form.headName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="整改时间：">{{ parseTime(form.rectificationTime,'{y}-{m}-{d}') }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-divider content-position="center">整改复查信息</el-divider>
    <el-form label-width="120px" v-show="form.rectificationReviewId != null">
      <el-row>
        <el-form-item label="复查意见：">{{ form.reviewContent }}</el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="复查照片/视频" >
          <image-preview :value="this.reviewFileData"/>
        </el-form-item>
      </el-row>
      <el-row>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="经纬度：">{{ form.reviewLongitude + ',' + form.reviewLatitude}}</el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="道路名称：">{{ form.reviewRoadName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="方向：">{{ form.reviewDirection }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="复查人：">{{ form.reviewByName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="复查时间：">{{ parseTime(form.reviewTime,'{y}-{m}-{d}') }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
    </div>
  </div>
</template>

<script>
  import { getCheckProblem } from "@/api/check/checkProblem";

  export default {

      name: "detail",
      data(){
        return{
          // 表单参数
          form: {},
          problemFileData : [],
          rectificationFileData : [],
          reviewFileData : []
        }
      },
      created() {
        const checkProblemId = this.$route.params && this.$route.params.checkProblemId;
        this.getCheckProblemDetailData(checkProblemId);
      },
      methods:{
        /** 获取详情数据 */
        getCheckProblemDetailData(checkProblemId) {
          getCheckProblem(checkProblemId).then(response => {
            const { code, data } = response;
            this.form = data;
            //  问题图片/视频
            this.problemFileData = data.problemFile;
            //  整改图片及视频
            this.rectificationFileData = data.rectificationFile;
            //复查图片及视频
            this.reviewFileData = data.reviewFile;
          });
        },

        close() {
          this.$tab.closePage();
        }
      }
    }
</script>
